<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册</title>
<link href="${ctx}/css/reg/reg.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/js/jquery.js" type="text/javascript"></script>
</head>

<body>
    <div id="reg_main_board">
      <form action="${ctx}/reg/register!save.action" method="post" onSubmit="return ckSubmit(this)">
		<div id="reg_info_demand">
            <div class="l" align="center">
                <h2>欢迎注册顺风车会员</h2>
            </div>
            
            <div class="l"><hr></div>
            <div id="warming">
            	<div class="memo"></div>
            </div>
            
            <div class="l">
              <h3>一卡通号:<em style="color:#F00;margin:0 0 0 1em;">*</em></h3>
                <div class="inner">
                    <input name="loginId" type="text" class="i" id="loginId" maxlength="128" />
                    <div class="memo"><span class="gray">*请填写正确格式的账号，或者填写一卡通账号！</span></div>
              </div>
            </div>
            
            <div class="l">
              <h3>用户密码:<em style="color:#F00;margin:0 0 0 1em;">*</em></h3>
                <div class="inner">
                    <input name="password" type="password" class="i" id="password" maxlength="25" />
                    <div class="memo"><span class="gray">*密码是由6到20位字母或数字组合！</span></div>
              </div>
            </div>
            
            <div class="l">
              <h3>确认密码:<em style="color:#F00;margin:0 0 0 1em;">*</em></h3>
                <div class="inner">
                    <input name="re_password" type="password" class="i" id="re_password" maxlength="15" />
                    <div class="memo"><span class="gray">*要求和上面填写的密码一致！</span></div>
              </div>
            </div>
		</div>
            
        <div class="l">
          <h3><input name="show_more" type="checkbox" id="show_more" value="1" />
          <a href="#" onClick="$('#show_more').click();">详细资料</a>(可选)</h3>
        </div>
        
        <div id="reg_info_more">
            
            <div class="l">
              <h3>姓名:<em style="margin-left:1.5em;"></em></h3>
                <div class="inner">
                    <input name="name" type="text" class="i" id="name" maxlength="16" />
                    <div class="memo"></div>
              </div>
          </div>
            <div class="l">
              <h3>昵称:<em style="margin-left:1.5em;"></em></h3>
                <div class="inner">
                    <input name="nickName" type="text" class="i" id="nickName" maxlength="16" />
                    <div class="memo"></div>
              </div>
          </div>
            
            <div class="l">
              <h3>性别:<em style="margin-left:1.5em;"></em></h3>
              <div class="inner">
                  <input name="sex" type="radio" value="M" checked />男
                  <input name="sex" type="radio" value="F" />女
              </div>
            </div>
            
            <div class="l">
              <h3>所在大学:<em style="margin-left:1.5em;"></em></h3>
                <div class="inner">
                    <input name="university" type="text" class="i" id="university" maxlength="32" />
                    <div class="memo"></div>
              </div>
            </div>
            
            <div class="l">
              <h3>学院:<em style="margin-left:1.5em;"></em></h3>
                <div class="inner">
                    <input name="collage" type="text" class="i" id="collage" maxlength="128" />
                    <div class="memo"></div>
              </div>
            </div>
            
            <div class="l">
              <h3>专业:<em style="margin-left:1.5em;"></em></h3>
                <div class="inner">
                    <input name="major" type="text" class="i" id="major" maxlength="128" />
                    <div class="memo"></div>
              </div>
            </div>
            
            <div class="l">
              <h3>手机:<em style="margin-left:1.5em;"></em></h3>
                <div class="inner">
                    <input name="tel" type="text" class="i" id="tel" maxlength="16" />
                    <div class="memo"></div>
              </div>
            </div>
            
            <div class="l">
              <h3>QQ:<em style="margin-left:1.5em;"></em></h3>
                <div class="inner">
                    <input name="qq" type="text" class="i" id="qq" maxlength="12" />
                    <div class="memo"></div>
              </div>
          </div>
            
            <div class="l">
              <h3>MSN:<em style="margin-left:1.5em;"></em></h3>
                <div class="inner">
                    <input name="msn" type="text" class="i" id="msn" maxlength="64" />
                    <div class="memo"></div>
              </div>
          </div>
            
            <div class="l">
              <h3>详细地址:<em style="margin-left:1.5em;"></em></h3>
                <div class="inner">
                    <input name="address" type="text" class="i" id="address" maxlength="66" />
                    <div class="memo"></div>
              </div>
            </div>

        </div>        
        <div class="l">
        	<h3>验&nbsp;&nbsp;证&nbsp;&nbsp;码:<em style="color:#F00;margin:0 0 0 1em;">*</em></h3>
            <div class="inner">
            	<input name="checkCode" type="text" class="check_num" id="checkCode" maxlength="6" />
                <div class="memo"><span class="gray">*验证码不区分大小写！</span></div>
          </div>
        </div>
        
        <div id="cc_block" style="display:none;font-size:12px;height:60px;">
        	<span id="captchaImg"><img src="${ctx}/jcaptcha.jpg" /></span>
            <a href="javascript:refreshCaptcha()">换一张</a>
        </div>
    
        <div style="height:36px;line-height:6px; padding:8px 0;">
	    	<input type="image" value=" " src="${ctx}/images/reg/open_reg_button.png" id="submitButton"/>
        </div>        
      </form>
    </div>

<script language="javascript">
var unchecked = "<img src='${ctx}/js/validate/images/unchecked.gif' />";
var checked = "<img src='${ctx}/js/validate/images/checked.gif' />";
var msg1 = "<span class='red'>输入的用户名地址格式不正确 ！</span>";
var msg2 = "<span class='red'>请使用由6到20位的字母或数字组成的！</span>";
var msg3 = "<span class='red'>两次输入的密码不一样！</span>";
var msg4 = "<span class='red'>此用户名已经存在，如果确是您的邮箱，请到您邮箱中激活或找回密码！</span>";
var msg5 = "<span class='red'>验证码填写不正确！</span>";
//展开详细信息面板
var isInfoMoreShow = false;

var err = new Array();
for(var i = 0;i<4;i++)
	err[i] = false;

$("#show_more").click(function(){
	if(isInfoMoreShow){
		isInfoMoreShow = false;
		$("#reg_info_more").slideUp("slow");		
	}else{
		isInfoMoreShow = true;
		$("#reg_info_more").slideDown("slow");
	}
});

//判断用户名是否可用
var isInputCh = false;

$("#loginId").change(function(){
	isInputCh = true;
});

$("#loginId").blur(function(){
	var rtNode = $("#loginId + .memo");
	if(isInputCh){
		//    /^[\w\.]+@\w+(\.\w+)+$/.test(this.value)
		if($.trim(this.value) != ""){
			isInputCh = false;
			var rt = $.get("${ctx}/reg/register!check.action",{"loginId":$.trim(this.value)},function(){
				if(rt.responseText == "Y"){
					err[0] = true;
					rtNode.html(checked);
				}else if(rt.responseText == "N"){
					err[0] = false;
					rtNode.html(unchecked+msg4);
				}
			});
		}else{
			err[0] = false;
			rtNode.html(unchecked+msg1);
		}
	}else if($.trim(this.value) == ""){
		err[0] = false;
		rtNode.html(unchecked+msg1);
	}
});
//密码是由6到20位字母和数字混合组成 if(/^\d*$/.test(this.value) || /^[a-zA-Z]*$/.test(this.value) || !/^\w{6,20}$/.test(this.value)) false
$("#password").blur(function(){
//	alert();
	var obj = $("#password + .memo");
	if(! /^[a-zA-Z\d]*$/.test(this.value) || !/^\w{6,20}$/.test(this.value)){
		obj.html(unchecked+msg2);
		err[1] = false;
	}else{
		obj.html(checked);
		err[1] = true;
	}
});

$("#re_password").blur(function(){
	var rtNode = $("#re_password + .memo");
	if($.trim(this.value)=="" || this.value != $("#password").val()){
		rtNode.html(unchecked+msg3);
		err[2] = false;
	}else{
		rtNode.html(checked);
		err[2] = true;
	}
	
});

$("#checkCode").keypress(function(){
	return /\w/.test(String.fromCharCode(event.keyCode));
});

$("#checkCode").blur(function(){
	var rtNode = $("#checkCode + .memo");
	if($.trim(this.value)!=""){
		err[3] = true;
		rtNode.html(checked);
	}else{
		err[3] = false;
		rtNode.html(unchecked+msg5);
	}
});
function refreshCaptcha(){
	$('#captchaImg').html('<img src="${ctx}/jcaptcha.jpg?'+Math.round(Math.random()*100000)+'"/>');
}
var isCheckCodeShow = false;
$("#checkCode").focus(function(){
	if(!isCheckCodeShow){
		ischeckCodeShow = true;
		$("#cc_block").show("fast");
	}
});

function ckSubmit(o){
	for(var j = 0;j<err.length;j++){
		if(err[j] == false){
			$("#warming > .memo").html("<span class='red'>*为必填项，请按照下面要求的格式正确填写！</span>");
			return false;
		}
	}
	return true;
}
</script>
</body>
</html>
